<template>
    <div
        v-show="(route.path === '/my/index' || route.path === '/news' || route.path === '/cinema/index' || route.path === '/movie')">
        <van-tabbar v-model="active" active-color="#ee0a24">
            <van-tabbar-item v-for="nav in footerNav" :key="nav.id" :url="nav.url" :icon="nav.icon">{{ nav.name
            }}</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
// import store from '@/store';

// import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
import store from '@/store';
import { createApp, computed, ref, reactive } from 'vue';
const app = createApp();

const router = useRouter()
const route = useRoute()

app.use(Tabbar);
app.use(TabbarItem);
let active = computed({
    get() {
        return store.state.active
    },
    set() {
        store.commit('changeActive', index)
    }
})


let index = ref(0)
let footerNav = reactive([
    {
        name: '电影',
        id: 1,
        icon: 'video-o',
        url: '#/movie'
    },
    {
        name: '影院',
        id: 2,
        icon: 'shop-o',
        url: '#/cinema/index'
    },
    {
        name: '资讯',
        id: 3,
        icon: 'comment-o',
        url: '#/news'
    },
    {
        name: '我的',
        id: 4,
        icon: 'manager-o',
        url: '#/my/index'
    }
])


</script>

<style></style>
